<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import chinaJSON from './map/china.json'
import { useEcharts } from '../../js/useEcharts'
import { useOptions } from '../commonOption/option'
const { chartRoundOptionsSeven} = useOptions()

// 第七个配置
const chartRoundContainerSeven = ref(null)
const resSeven = useEcharts(chartRoundContainerSeven, chartRoundOptionsSeven)

// 注册中国地图
const mapCharts = ref(null)
echarts.registerMap('china', chinaJSON)
onMounted(() => {
  let myMap = echarts.init(mapCharts.value)
  //设置配置项
  myMap.setOption({
    geo: {
      map: 'china',
      // roam: true, //鼠标缩放
      //地图位置
      width: 800,
      height:800,
      // left: 40,
      top:5,
      // bottom: 20,
      // right: 20,
      // 地图文字设置
      label: {
        show: true,
        color: 'white',
        fontSize: 14
      },
      itemStyle: {
        color:
          // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            // 渐变效果
            colorStops: [
              {
                offset: 0,
                color: '#022960' // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#023481' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          },
        // 边框设置样式
        borderColor: '#179FCB',
        shadowColor: 'rgba(23,159,203, 0.5)',
        shadowBlur: 17
      },
      //   地图高亮效果
      emphasis: {
        itemStyle: {
          color: '#1369CD'
        },
        label: {
          color: '#82B9F8'
        }
      }
    },
    series: [
      // 添加航线
      {
        type: 'lines',
        // 动画特效设置
        effect: {
          show: true,
          // 飞线标记图形
          // symbol:'arrow',
          // 下面使用的是小飞机图标
          symbol:
            'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
          //飞机的速度  这里是s单位
          period: 6,
          trailLength: 0,
          // 飞机大小
          symbolSize: 16,
          color: '#ff8800'
        },
        data: [
          {
            coords: [
              // 模拟数据
              [104.065735, 30.659462], //起点 四川 
              [87.617733, 43.792818] //终点  新疆
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'white',
              type: 'dashed', //设置虚线
              curveness: 0.1 // 弯曲度
            }
          }
        ]
      },
      //   给航线起始点添加效果
      {
        type: 'effectScatter', //涟漪特效动画的散点（气泡）图
        coordinateSystem: 'geo',
        zlevel: 2,
        //涟漪特效相关配置
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: 'stroke', //波纹绘制方式 stroke, fill
          scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          normal: {
            show: false,
            position: 'right', //显示位置
            offset: [5, 0] //偏移设置
          }
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            // 设置圆环颜色
            color: '#E0C896'
          }
        },
        data: [
          {
            // name:'北京',
            value: [104.065735, 30.659462]
          }
        ]
      },
      //终点
      {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
          period: 4,
          brushType: 'stroke',
          scale: 4
        },
        label: {
          normal: {
            show: false,
            position: 'right', //显示位置
            offset: [5, 0], //偏移设置
            formatter: '' //圆环显示文字
          },
          emphasis: {
            show: true
          }
        },
        symbol: 'circle',
        symbolSize: 10,
        itemStyle: {
          normal: {
            // 设置圆环颜色
            color: '#63FF00'
          }
        },
        data: [
          {
            // name:'福建',
            value: [87.617733, 43.792818]
          }
        ]
      }
    ]
  })
})
</script>

<template>
  <div class="main">
    <div class="header">
      <div class="left title">首页</div>
      <div class="center title">智慧旅游可视化大数据展示平台</div>
      <div class="right title">统计报告</div>
      <div class="warn">平台高峰预警信息(2条)</div>
    </div>
    <div class="content">
      <div ref="mapCharts" style="width: 1000px; height: 600px"></div>
      <div class="real-people">景区实时客流量</div>
    </div>
    <div class="footer">
      <div class="preview">
         <div>未来30天游客量趋势图</div>
        <img src="../../images/dataScreen-title.png" alt="" />
      </div>
        <div ref="chartRoundContainerSeven" style="width: 100%; height: 270px;"></div>
      
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  width: 1080px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .header {
    width: 100%;
    height: 100px;
    display: flex;
    position: relative;
    .title {
      text-align: center;
      line-height: 40px;
      color: aquamarine;
      font-size: 14px;
      font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
      font-weight: 600;
      font-style: italic;
      letter-spacing: 2px;
    }
    .left {
      width: 130px;
      height: 40px;
      background: url('../../images/dataScreen-header-btn-bg-l.png');
    }
    .center {
      width: 880px;
      height: 100px;
      background: url('../../images/dataScreen-header-center-bg.png') no-repeat top center;
      background-size: contain;
      line-height: 80px;
      font-size: 20px;
      letter-spacing: 5px;
    }
    .right {
      width: 130px;
      height: 40px;
      background: url('../../images/dataScreen-header-btn-bg-r.png');
    }
    .warn {
      width: 300px;
      height: 40px;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url('../../images/dataScreen-header-warn-bg.png') no-repeat center;
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      font-style: italic;
      letter-spacing: 2px;
      line-height: 40px;
      text-align: center;
    }
  }
  .content {
    margin: 0 auto;
    width: 90%;
    height: 600px;
    // background-color: pink;
    margin-top: 50px;
    position: relative;
    .real-people{
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height:25px;  
      background: url(../../images/map-title-bg.png) no-repeat  ;
      background-size: cover;
      color: #fff;
      font-size: 14px;
      font-weight:500;
      letter-spacing: 5px;
      line-height: 25px;
      padding-left: 30px;
    }
  }
  .footer{
    width: 90%;
    height: 270px;
    margin: 0 auto;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    .preview{
      width: 100%;
      height: 55px;
      color: white;
      font-size: 16px;
      font-family: YouSheBiaoTiHei;
      margin-bottom: 6px;
      font-weight: 600;
      font-style: italic;
    }
  }
}
</style>
